<template>
  <div class="backTop" ref="backTop" v-show="open">
    <div
      :class="!darkSkin ? 'rocket' : 'rocket dark'"
      @click="toTop"
      ref="rocket"
    >
      <img src="../assets/images/rocket.png" />
    </div>
  </div>
</template>

<script>
export default {
  name: "BackTop",
  props: {
    open: Boolean,
  },
  data() {
    return {
      timer_rocket: null,
      timer_top: null,
    };
  },
  computed: {
    darkSkin() {
      return this.$store.state.darkSkin;
    },
  },
  methods: {
    toTop() {
      const backTop = this.$refs.backTop;
      backTop.classList.add("run");
      this.animateTop();
      this.timer_rocket = setTimeout(() => {
        backTop.classList.remove("run");
        clearTimeout(this.timer_rocket);
        this.timer_rocket = null;
      }, 2000);
    },
    animateTop() {
      this.timer_top = setInterval(() => {
        let top = document.body.scrollTop || document.documentElement.scrollTop;
        let speed = top / 6;
        if (document.body.scrollTop != 0) {
          document.body.scrollTop -= speed;
        } else {
          document.documentElement.scrollTop -= speed;
        }
        if (top == 0) {
          clearInterval(this.timer_top);
          this.timer_top = null;
        }
      }, 25);
    },
  },
};
</script>

<style scoped>
@keyframes rocket-move {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(2px);
  }
}
@keyframes backTop-run {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-400%);
    opacity: 0;
  }
}
@media screen and (min-width: 1439.98px) {
  .backTop {
    position: fixed;
    right: 1%;
    bottom: 10%;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1439.98px) {
  .backTop {
    position: fixed;
    right: 0;
    bottom: 10%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  .backTop {
    position: fixed;
    right: 1%;
    bottom: 10%;
  }
}
@media screen and (max-width: 767.98px) {
  .backTop {
    position: fixed;
    right: -6%;
    bottom: 3%;
    transform: scale(0.5);
    z-index: 99;
  }
}
* {
  box-sizing: border-box;
}

.backTop.run {
  animation: backTop-run 2s ease;
}
.rocket {
  position: relative;
  animation: rocket-move 1.6s ease infinite;
  background-color: transparent;
}

.rocket img {
  cursor: pointer;
  width: 100px;
  height: 100px;
}

.rocket::before {
  content: "";
  width: 10px;
  height: 80px;
  /* background-image: linear-gradient(#00d0ff, transparent); */
  background-image: linear-gradient(#ff3f34, transparent);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -80px;
}
.rocket::after {
  content: "";
  width: 10px;
  height: 80px;
  background-image: linear-gradient(#ff3f34, transparent);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -80px;
  filter: blur(15px);
}
.rocket.dark::before {
  background-image: linear-gradient(#00d0ff, transparent);
}
.rocket.dark::after {
  background-image: linear-gradient(#00d0ff, transparent);
}
</style>